<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>原生js实现留言板功能</title>
</head>
<body>
<h3>留言板（增）</h3>
<div id="app">
	<input type="text">
	<button>提交</button>
	<ul></ul>
</div>
<script>
//获取到要用到的元素
let input = document.getElementsByTagName('input')[0];
let btn = document.getElementsByTagName('button')[0];
let ul = document.getElementsByTagName('ul')[0];
btn.onclick = function(){
	//创建新元素
	let li = document.createElement('li');
	//添加内容
	li.innerHTML = input.value;
	
	//将新元素添加到页面中
	// ul.appendChild(li);
	
	//判断当前列表：为空，直接加到末尾；如果已有留言，插到留言的全面
	if(ul.children.length === 0){
		ul.appendChild(li);
	}else{
		let first = ul.firstElementChild;
		ul.insertBefore(li, first);
	}
	
	//清空input
	input.value = '';
}

</script>
</body>
</html>

